React Fiber
Reactの処理単位
Fiber単位に優先度を振り、優先度が高いものを更新する
ReactElement毎に、更新処理をリストにする
更新処理のスタックフレームのように扱われる
コンポーネント同士を連結している
Fiberはタスクの最小単位
この単位ごとにSchedulerが処理を行う
Fiberを最小単位とすることで以下のようなことが実現できる
処理の休止と、後にそこへ戻ること
処理の優先順位割り振り
以前に完了した処理の再利用
不要な処理の強制終了
Fiberが含んでいる内容
React Fiber誕生の経緯
従来(v15以前)は差分検出のためのアルゴリズムとして、Virtual DOMを上から再帰的に比較する方法を取っていた このアルゴリズムだと、「更新する」と決まったものを全て更新するまで、他の処理をブロックしてた
つまりその間アプリケーションがフリーズする
要は全ての差分を同等に扱っていたが、実際のUIではそうでもないことも多い
つまり、差分を即座に反映する必要がない箇所もある
ex. フォーム入力の描画は優先度が高い
ex. アニメーションとstore更新なら後者の方が先に完了する必要がある
ということで、どれを優先的に更新するかを決めることにした
ここにFiberを用いる
「ReactElementのリスト」を使うことで、更新処理を独立に行う
独立に行うことで途中で処理を休止したり、その後そこから再開したりができる
差分は検出したが実際に使われるまでは更新しない遅延評価が行われるということかmrsekut.icon 優先度の割り振りはどういう規則に則って行われている？
つまりどういう処理は優先度が高い？
参考
Fiber型の詳細など
FIber以前のアルゴリズムの問題点などが詳しい
Fiberのスケジューリングなどについても詳しい
あまりちゃんと読んでないmrsekut.icon
解説